<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>兴趣调频</title>
	<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no">
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="apple-mobile-web-app-status-bar-style" content="black">
	<link href="../../plugins/mui/mui.min.css" rel="stylesheet" />
	<link href="../../css/city/reset.css" rel="stylesheet" />
	<script src="../../js/statistics.js"></script>
	<style>
		body{
			font-family: "microsoft yahei",sans-serif;
			background: #ffffff;
		}
		.mui-bar{
			background: #2a2c33;
		}
		.mui-title{
			color:#ffffff;
		}
		.mui-action-back{
			color: #ffffff;
		}
		.lists{
			width: 100vw;
			padding:0 13px;;
		}
		.list{
			position: relative;
			top:0;
			width: 100%;
			height: 37vw;
			margin: 10px auto;
			-webkit-border-radius:5px;
			border-radius:5px;
			overflow: hidden;
			color:#ffffff;
			text-align: center;
		}
		.list img{
			width: 100%;
			height: 37vw;
		}
		.list .text{
			position: absolute;
			top:0;
			width: 100%;
			height: 100%;
			background: rgba(0, 0, 0, 0.35);
		}
		.list .interest{
			display: inline-block;
			width: 100%;
			font-size: 2.6rem;
			margin-top: 45px;
			margin-bottom: 10px;
		}
		.list .description{
			position: relative;
			top:0;
			display: inline-block;
			font-size: 1.4rem;
		}
		.list .description:before{
			position: absolute;
			top:45%;
			left: -68px;
			content: '';
			width: 60px;
			height: 1px;
			background: #ffffff;
		}
		.list .description:after{
			position: absolute;
			top:45%;
			right: -68px;
			content: '';
			width: 60px;
			height: 1px;
			background: #ffffff;
		}
	</style>

</head>
<body>
	<div class="lists">
	</div>
	<script src="../../plugins/mui/mui.min.js"></script>
	<script src="../../plugins/jquery/jquery-3.1.0.min.js"></script>
	<script src="../../js/getApiToken.js"></script>
	<script src="../../js/md5.js"></script>
	<script>
	mui.init({
		swipeBack: false,
//		statusBarBackground: '#43ac45',
		gestureConfig: {
			doubletap: true
		},
		subpages: [{
			url:'interest_lists.html',
			id:'interest_lists',
			styles: {
				top: '44px',
				bottom: 0,
				bounce: 'vertical'
			}
		}]
	});
	mui.plusReady(function(){
		//关闭等待框
		plus.nativeUI.closeWaiting();
		//显示当前页面
		mui.currentWebview.show('slide-in-right',200);
		//获取列表
		myAjax(
				'card/card_type/gettypelist',
				'get', {
//					'api_token': 'f73d661f4b89e335d6e126975e7f04fc'
				}, function(data) {
//					console.log(JSON.stringify(data));
					if(data.success) {
						var html = '';
						var lists = data.data;
						var len = lists.length;
						for(var i = 0 ; i < len ;i++){
							var list = lists[i];
							html+=
									'<div class="list" data-tab='+list.id+'>'+
									'<img src='+_baseUrl+list.path+' alt="兴趣调频">'+
									'<div class="text">'+
									'<span class="interest">'+list.interest+'</span>'+
									'<span class="description">'+list.describe+'</span>'+
									'</div>'+
									'</div>'
						}
						$('.lists' ).append(html);}
					mui(".list").each(function () {
						var this_ =this;
						this_.addEventListener('tap', function(e) {
							e.detail.gesture.preventDefault(); //修复iOS 8.x
							var type = this_.getAttribute('data-tab');
							var url =$(this_).find('img').attr('src');
							var interest = this_.getElementsByClassName('interest')[0].innerText;
							var description = this_.getElementsByClassName('description')[0].innerText;
							mui.openWindow({
								url:'tribune_index.html',
								id:'tribune_index',
								extras:{
									'type':[type,url,interest,description]
								},
								show:{
									autoShow:false,
									aniShow:'slide-in-right',
									duration:200
								},
								waiting:{
									autoShow:true,
									title:'正在加载...'
								}
							})
						});
					});
				});


	});
	</script>
</body>
</html>
